@import 'variable.scss';

.author-board {
	width: 1200px;
	padding-left:55px;
	margin: 40px auto;

	.author-item {
		float: left;
		width: 50%;
		margin-bottom: 50px;

		.img-wrap {
			float: left;
			position: relative;

			.triangle-right {
				top: 42px;
				right: -27px;
				position: absolute;
				border-left-color: $infoBgColor;
			}

			&.last {
				margin-left: 28px;
			}
      
			.author-img {
				width: 115px;
				border-radius: 50%;
				box-shadow: 1px 3px 5px #ccc;
				border: 3px solid $infoBgColor;
				box-sizing: border-box;
				transition: box-shadow .3s;

				&:hover {
					box-shadow: 2px 4px 6px #999;
				}
			}
		}

		.author-info {
			float: left;
			position: relative;
			width: 330px;
			height: 245px;
			padding: 15px;
			margin-left: 35px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 1px 3px 5px #ccc;
			overflow: hidden;
			transition: box-shadow .3s;

			&:hover {
				box-shadow: 2px 4px 6px #999;
			}

			.author-header {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 44px;
				padding: 0 15px;
				box-sizing: border-box;
				line-height: 44px;
				background-color: $infoBgColor;

				.author-name {
					font-size: 20px;
					color: #fff;

					a {
						color: #fff;
						transition: font-size .3s;

						&:hover {
							font-size: 21px;
						}
					}
				}
			}

			.count {
				height: 40px;
				margin: 35px 0 15px;
				border-bottom: 1px solid #ddd;
				line-height: 40px;
			    color: #666;
			    text-overflow: ellipsis;
			    white-space: nowrap;
			    overflow: hidden;

				i {
					color: $infoBgColor;
				}
			}

			.intro {
				text-indent: 2em;
				line-height: 30px;
			}
		}
	}
}